<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;height:300px;border:solid 1px black;margin:20px auto;}

        .btns{height:30px;border-bottom:solid 1px black;}
        .btns button.active{background:red;}

        .cont>div{width:400px;height:269px;display:none;}

        .cont .cont1{background:red;display:block;}
        .cont .cont2{background:green}
        .cont .cont3{background:blue}
    </style>
</head>
<body>

    <div class="box">
        <div class="btns">
            <button class="active">选项1</button>
            <button>选项2</button>
            <button>选项3</button>
        </div>
        <div class="cont">
            <div class="cont1">
                选项1对应的内容选项1对应的内容选项1对应的内容选项1对应的内容
            </div>
            <div class="cont2">
                选项2对应的内容
            </div>
            <div class="cont3">
                选项3对应的对应的对应的对应的对应的
            </div>
        </div>
    </div>

</body>
<script>
    var btns = document.querySelectorAll(".btns button");
    var conts = document.querySelectorAll(".cont>div");

    // 记录当前索引
    var index = 0;

    for(var i=0;i<btns.length;i++){
        // 给每个按钮绑定一个自定义属性，用来作为元素自身的索引
        btns[i].index = i;

        btns[i].onclick = function(){
            // 点击时获取当前元素
            // console.log(this);
            // 点击时获取当前元素的索引
            // console.log(this.index);
            // 取消当前按钮的样式
            btns[index].className = "";
            conts[index].style.display = "none";
            // 给点击的按钮添加样式
            this.className = "active";
            conts[this.index].style.display = "block";
            // 今天是明天的昨天
            // 这次点的按钮的索引设置为下次点按钮时的上一个索引
            index = this.index;
        }
    }

    // this在事件处理函数中表示绑定事件的元素
    
</script>
</html>